<template>
  <div class="classify">
    <div class="search">
      <div class="search-div"
           @click="showSearch = true">
        <div class="img"></div>
        <div class="tip">{{haveGoodsCount}}</div>
      </div>
    </div>
    <div class="dividing"></div>
    <div class="contain">
      <div class="left">
        <div class="left-list"
             @click="clickLeft(index, item)"
             v-for="(item, index) in leftBrandData">
          <div class="unselected-v"
               :class="{'selected-v': leftClickIndex === index}"></div>
          <span :style="{color: leftClickIndex === index ? 'RGBA(174, 42, 38, 1)' : 'RGBA(51, 51, 51, 1)',fontSize: leftClickIndex === index ? '0.32rem' : '0.28rem'}">{{item.brname}}</span>
          <div v-for="(itemSub, indexSub) in item.sublist"
               v-if="leftClickIndex === index"
               class="per-contain"
               @click.stop="clickSubItem(indexSub, itemSub)"
               :style="{paddingTop: indexSub - '0' === 0 ? '0.11rem' : '0.04rem'}">
            <div class="sub-contain">
              <div class="sub-point"
                   v-if="leftClickSubIndex === indexSub" />
              <div class="sub-text"
                   :style="{color: leftClickSubIndex === indexSub ? 'RGBA(51, 51, 51, 1)' : 'RGBA(153, 153, 153, 1)'}">{{itemSub.brname}}</div>
              <div class="sub-point"
                   v-if="leftClickSubIndex === indexSub" />
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-list"
             @click="clickItem(item)"
             v-for="(item, index) in this.page.list">
          <div class="right-contain">
            <div class="img">
              <img :src="item.img">
            </div>
            <div class="contain-center">
              <div class="title maxLine2">{{item.pdname}}</div>
              <div class="price">{{item.psprice | math-mul(item.discount) | math-round(2,1) | math-money}}</div>
            </div>
            <div class="shopcat"
                 @click.stop="clickShopCat(item)">
              <div class="shopcat-img"></div>
            </div>
          </div>
          <div class="right-dividing"></div>
        </div>
        <error-page :imgWidth="200"
                    :imgHeight="200"
                    emptyImg="empty-building"
                    :type="'text'"
                    emptyDesc="<span style='color:RGBA(153, 153, 153, 1);font-size:0.30rem'>正在建设中...</span>"
      
                    class="absolute-clazz"
                    v-if="page.loaded && page.list.length === 0" />
        <span class="loadding-end"
              ref="end"
              v-if="page.loaded && !page.more > 0">木有啦,滑到最后了~</span>

        <div class="loadding-up"
             v-if="(page.loading && page.more)&&page.list.length > 0">
          <div class="loadding-up-div"></div>
        </div>
      </div>
    </div>
    <buy-picker :detailData="detailData"
                v-model="showBuyPicker"
                :type="buyType"></buy-picker>
    <search v-if="showSearch"
            :totalProductCountText="haveGoodsCount"
            @hideSearch="showSearch = false"
            @subSearchData="subSearchData"></search>
    <home-nav></home-nav>
  </div>
</template>

<script>
import mixins from '@/mixins'
import HomeNav from '@/components/home-nav'
import pageList from '@/components/common-js/page-list'
import buyPicker from '@/components/buy-picker'
import ErrorPage from '@/components/error-page'
import Search from '../search/search'
export default {
  name: 'classify',
  mixins: [mixins, pageList],
  data () {
    return {
      tempObj: {
        img: '',
        title: '多太美肤套装',
        price: 444
      },
      rightList: [],
      leftClickIndex: 0,
      leftClickSubIndex: 0,
      leftBrandData: [],
      url: '/tProduct/list.json',
      searchData: {},
      detailData: {},
      buyType: 0,
      showBuyPicker: false,
      showSearch: false,
      totalProductCount: 0
    }
  },
  watch: {
  },
  computed: {
    haveGoodsCount () {
      return `商品搜索，共${this.totalProductCount}款好物`
    }
  },
  async mounted () {
    // 获取左边的列表
    await this.requestNet()
    this.requestCountNet()
    // 查找选中的条目
    if (this.leftBrandData && this.leftBrandData[this.leftClickIndex]) {
      // 获取父类对象
      let subItem = this.leftBrandData[this.leftClickIndex]
      // 如果有子类，获取子类brid
      if (subItem.sublist && subItem.sublist.length > 0) {
        this.initRightList(subItem.sublist[this.leftClickSubIndex].brid)
      } else {
        // 没有子类，获取父类brid
        this.initRightList(subItem.brid)
      }
    }
    this.pull()
  },
  methods: {
    async requestCountNet () {
      let productCount = await this.$ajax.get('/tProduct/productcount.json')
      this.totalProductCount = productCount.result
    },
    subSearchData (val) {
      this.showSearch = false
      this.$router.push({name: 'search-result', query: {searchResult: val}})
    },
    async clickShopCat (item) {
      this.detailData = await this.$ajax.get('/tProduct/detail.json', {
        pdid: item.pdid
      })
      this.showBuyPicker = true
    },
    clickItem (item) {
      this.$router.push({name: 'productdetails', query: {pdid: item.pdid}})
    },
    // 点击左边的条目
    clickLeft (index, item) {
      this.leftClickIndex = index
      this.leftClickSubIndex = 0
      // 如果有子类
      if (item && item.sublist && item.sublist.length > 0) {
        // 获取子类brid
        this.initRightList(item.sublist[0].brid)
      } else {
        // 没有子类，获取父类brid
        this.initRightList(item.brid)
      }
    },
    // 请求左边列表数据
    async requestNet () {
      this.leftBrandData = await this.$ajax.get('/zBrand/list.json')
    },
    // 点击子类事件
    clickSubItem (indexSub, itemSub) {
      this.leftClickSubIndex = indexSub
      this.initRightList(itemSub.brid)
    },
    // 获取右边数据
    async initRightList (brid) {
      this.searchData.brid = brid
      await this.loadPageList(this.url, true)
    },
    pull () {
      let self = this
      this.observer = new IntersectionObserver(function (val) {
        if (val[0].isIntersecting) {
          self.loadPageList(this.url)
        } else {
        }
      })
      this.$nextTick(() => {
        this.$refs.end && this.observer.observe(this.$refs.end)
      })
    }
  },
  components: {
    HomeNav,
    buyPicker,
    ErrorPage,
    Search
  }
}
</script>


<style lang="stylus" scoped>
.classify {
  height: 93vh;
  display: flex;
  flex-direction: column;

  .search {
    width: 100%;
    height: 90px;
    padding-left: 36px;
    padding-right: 36px;
    padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;

    .search-div {
      width: 100%;
      height: 56px;
      background: rgba(234, 235, 237, 1);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      .img {
        background-image: url('~@image/icon-search.png');
        background-size: 32px 32px;
        width: 32px;
        height: 32px;
        margin-right: 6px;
        background-repeat: no-repeat;
      }

      .tip {
        font-size: 26px;
        color: rgba(153, 153, 153, 1);
      }
    }
  }

  .dividing {
    width: 100%;
    height: 1px;
    background: rgba(220, 220, 220, 1);
  }

  .contain {
    flex: 1;
    display: flex;

    .left {
      width: 220px;
      // padding-left: 15px;
      // padding-right: 22px;
      background: RGBA(245, 245, 245, 1);
      height: 100%;

      .left-list {
        display: flex;
        margin-top: 41px;
        flex-direction: column;
        position: relative;

        span {
          width: 100%;
          font-size: 28px;
          margin-left: 28px;
          color: rgba(51, 51, 51, 1);
        }

        .unselected-v {
          width: 3px;
          position: absolute;
          top: 0;
          left: 0;
          height: 40px;
          margin-left: 15px;
          background: none;
        }

        .selected-v {
          background: RGBA(174, 42, 38, 1);
          width: 3px;
          position: absolute;
          top: 0;
          left: 0;
        }

        .per-contain {
          display: flex;
          flex-direction: column;

          .sub-contain {
            display: flex;
            justify-content: center;
            align-items: center;

            .sub-point {
              display: flex;
              width: 5px;
              height: 5px;
              border-radius: 50%;
              background: black;
            }

            .sub-text {
              display: flex;
              justify-content: center;
              font-size: 26px;
              margin-left: 9px;
              margin-right: 9px;
              color: rgba(51, 51, 51, 1);
            }
          }
        }
      }
    }

    .right {
      flex: 1;
      background: white;
      height: 100%;
      position: relative;

      .absolute-clazz {
        position: absolute;
      }

      .right-list {
        .right-contain {
          display: flex;
          margin-top: 15px;
          margin-bottom: 15px;

          .img {
            margin-left: 14px;
            width: 160px;
            height: 160px;

            img {
              width: 160px;
              height: 160px;
            }
          }

          .contain-center {
            margin-left: 20px;
            display: flex;
            flex-direction: column;

            .title {
              margin-top: 11px;
              font-size: 32px;
              color: rgba(51, 51, 51, 1);
            }

            .price {
              margin-bottom: 13px;
              flex: 1;
              display: flex;
              align-items: flex-end;
              font-size: 28px;
              color: rgba(227, 20, 54, 1);
            }
          }

          .shopcat {
            flex: 1;
            align-items: flex-end;
            display: flex;
            justify-content: flex-end;
            height: 160px;

            .shopcat-img {
              width: 33px;
              height: 27px;
              background-image: url('~@image/icon-addshopcat.png');
              background-size: 33px 27px;
              background-repeat: no-repeat;
              margin-right: 40px;
              margin-bottom: 13px;
            }
          }
        }

        .right-dividing {
          margin-left: 9px;
          margin-right: 18px;
          background: rgba(220, 220, 220, 1);
          height: 1px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
